<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
  <title>Demo</title>
  <style>
  #paper {
    position: relative;
  }
  </style>
</head>
<body>
  <div id="paper"></div>
  <script src="/js/spritejs.js"></script>
  <script>
  (async function(){
    const paper = spritejs.Paper2D('#paper', 600, 400)
    const Sprite = spritejs.Sprite,
          Color = spritejs.Color

    const s = new Sprite({
      attributeChangedCallback(...args) {
        //console.log(args)
      }
    })

    s.attr({
      anchor: [0.5, 0.5],
      pos: [100, 100],
      size: [50, 50],
      bgcolor: 'green',
      //opacity: 0.5,
      transform: {
        translate: [30, 30],
        rotate: 45,
      },
      zIndex: 500
    })

    paper.layer().appendChild(s)
    
    s.animate(
      [{rotate: 0, bgcolor: 'red'},
       {rotate: 360, bgcolor: 'blue'}], 
      {
        duration:2000,
        effect: (from, to, p) => {
          let rotate = (to.rotate - from.rotate) * p
          let fromColor = new Color(from.bgcolor),
              toColor = new Color(to.bgcolor)
          
          let color = {
            model: 'rgb',
            value: [fromColor.value[0] + p * (toColor.value[0] - fromColor.value[0]),
                    fromColor.value[1] + p * (toColor.value[1] - fromColor.value[1]),
                    fromColor.value[2] + p * (toColor.value[2] - fromColor.value[2]),
                    1].map(c => Math.round(c))
          }

          // console.log(new Color(color).toString())

          return {rotate, bgcolor: new Color(color).str}
        }
      })

    const animation = s.animate(
    [{
      transform: {
        rotate: 45,
      },
      bgcolor: 'red',
      borderRadius: 0,
    }, 
    {
      transform: {
        rotate: 135,
      },
      bgcolor: 'green',
      borderRadius: 25,
    },
    {
      transform: {
        rotate: 135,
      },
      bgcolor: 'green',
      borderRadius: 25,
    },
    {
      transform: {
        rotate: 225,
      },
      bgcolor: 'blue',
      borderRadius: 0,
    }], 
    {
      duration: 2000,
    })

    // window.animation = animation
    // await animation.ready
    // console.log('ready')
    // paper.layer().timeline.playbackRate = -1

    // s.on('click', function(evt){
    //   console.log(evt)
    // })

    const s2 = new Sprite()

    s2.attr({
      anchor: [0.5, 0.5],
      pos: [300, 100],
      size: [50, 50],
      bgcolor: 'red',
      border: [5, 'blue'],
      opacity: 1,
      zIndex: 101,
      transform: {
        //skew: [30, 0]
        translate: [30, 30],
        rotate: 90
      }
    })
    
    paper.layer().appendChild(s2)

    await animation.finished
    // console.log('finished')

    const s3 = new Sprite()

    s3.attr({
      anchor: [0.5, 0.5],
      pos: [200, 200],
      size: [50, 50],
      bgcolor: 'red',
      border: [15, 'blue'],
      opacity: 0.5,
    })


    paper.layer().appendChild(s3)

    window.s = s;

    s.on('touchstart', e => {
      console.log('in origin box', e.offsetX, e.offsetY);
      e.stopDispatch()
    })

    s2.on('touchstart', e => {
      console.log(111)
    })
  })()
  </script>
</body>
</html>